{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="31"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/lab_courses">所有课程</a></li>
        <li class="active">{{coursename}}</li>
    </ol>
    <div class="page-header">
        <h4>
            <strong>{{coursename}}</strong>
            <button class="btn btn-primary btn-sm" type="button" data-bind="click:$root.newChapter" title="添加新章节">
                <i class="glyphicon glyphicon-plus"></i>
            </button>
        </h4>
    </div>
    <div data-bind="foreach:chapters">
        <div class="panel-group" id="accordion">
            <div class="panel panel-success">
                <div class="panel-heading" style="position:relative">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" data-bind="attr:{href:'#panel' + chapterID}">
                            <b data-bind="text:chapterName"></b>
                            (<span data-bind="text:code"></span>)
                        </a>
                        <span style="position: absolute; right: 10px; bottom:3px">
                            <button type="button" class="btn btn-sm btn-primary" data-bind="click:$root.newLab" title="添加新实验">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-warning" data-bind="click:$root.editChapter" title="修改章信息">
                                <i class="glyphicon glyphicon-tag"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger" data-bind="click:$root.deleteChapter" title="删除本章">
                                <i class="glyphicon glyphicon-trash"></i>
                            </button>
                        </span>
                    </h4>
                </div>
                <div class="panel-collapse collapse" data-bind="attr:{id:'panel' + chapterID}">
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <td style="width:30%">实验名称</td>
                                    <td style="width:15%">编号</td>
                                    <td style="width:15%">类型</td>
                                    <td style="width:15%">状态</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach:labs">
                                <tr>
                                    <td><b data-bind="text:labName"></b></td>
                                    <td data-bind="text:code"></td>
                                    <td data-bind="text:labType() == 1 ? '演示' : '实战'"></td>
                                    <td data-bind="text:enabled() == 1 ? '开放中' : '未开放'"></td>
                                    <td>
                                        <a class="btn btn-primary btn-sm" data-bind="attr:{href:'/lab_lab/' + labID}" title="编辑实验内容">
                                            <i class="glyphicon glyphicon-list-alt"></i>
                                        </a>
                                        <button type="button" class="btn btn-warning btn-sm" data-bind="click:$root.editLab" title="修改实验基本信息">
                                            <i class="glyphicon glyphicon-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" data-bind="click:$root.deleteLab" title="删除实验">
                                            <i class="glyphicon glyphicon-remove-sign"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table> 
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</div>

<!-- 章对话框开始 -->
<div id="dlgChapter" class="modal fade" data-bind="with:selectedChapter">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">章信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-2">名称</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" data-bind="value:chapterName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">编号</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" data-bind="value:code" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2">
                            <button type="button" class="btn btn-default" data-bind="click:$root.confirmChapter">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 章对话框结束 -->
<!-- 实验对话框开始 -->
<div id="dlgLab" class="modal fade" data-bind="with:selectedLab">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">实验信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-2">名称</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" data-bind="value:labName" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">编号</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" readonly data-bind="value:code"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">类型</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
								<input type="radio" name="labtype" value="2" data-bind="checked:labType"/>实战型
							</label>
							<label class="radio-inline">
								<input type="radio" name="labtype" value="1" data-bind="checked:labType"/>演示型
							</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">状态</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
								<input type="radio" name="status" value="1" data-bind="checked:enabled"/>开放中
							</label>
							<label class="radio-inline">
								<input type="radio" name="status" value="0" data-bind="checked:enabled"/>不开放
							</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2">
                            <button type="button" class="btn btn-default" data-bind="click:$root.confirmLab">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 实验对话框结束 -->

{% end block %}


{% block script %}
<script type="text/javascript">
    var courseID = window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1);

    function Chapter(chapterID, chapterName, code){
        var self = this;
        self.chapterID = chapterID;
        self.chapterName = ko.observable(chapterName ? chapterName : "");
        self.code = code;
        self.labs = ko.observableArray();
    }

    function Lab(labID, chapterID, labName, code, labType, enabled, chapter){
        var self = this;
        self.labID = labID;
        self.chapterID = chapterID;
        self.labName = ko.observable(labName ? labName : "");
        self.code = code;
        self.labType = ko.observable(labType ? labType.toString() : "1");
        self.enabled = ko.observable(enabled ? enabled.toString() : "0");
        self.chapter = chapter;
    }

    function ModelView(){
        var self = this;
        self.chapters = ko.observableArray();
        self.selectedChapter = ko.observable();
        self.selectedLab = ko.observable();

        self._updateChapter = function(obj){
            for(var i=0;i<self.chapters().length;i++){
                c = self.chapters()[i];
                if (obj.chapterID == c.chapterID){
                    c.chapterName(obj.chapterName());
                    break;
                }
            }
        }

        self.newChapter = function(){
            self.selectedChapter(new Chapter());
            $("#dlgChapter").modal({ 'backdrop': 'static' });
        };

        self.editChapter = function(){
            self.selectedChapter(this);
            $("#dlgChapter").modal({ 'backdrop': 'static' });
        };

        self.confirmChapter = function(){
            var obj = this;
            if (!obj.chapterName){
                bootbox.alert('请填写章名称字段！');
                return;
            }

            var chapter = {
                chapterid : obj.chapterID,
                courseid : courseID,
                chaptername : obj.chapterName()
            };
            url = obj.chapterID ? '/lab_editchapter' : '/lab_newchapter';
            type = obj.chapterID ? 'put' : 'post';
            $.ajax({
                url :  url,
                type : type,
                data : JSON.stringify(chapter),
                dataType: 'json',
                success : function(result){
                    if(result.code == 'success'){
                        bootbox.alert('操作成功！', function(){
                            $("#dlgChapter").modal('hide');
                            if(type == 'post'){
                                obj.chapterID = result.message.chapterid;
                                obj.code = result.message.code;
                                self.chapters.push(obj);
                            }
                        })
                    } else{
                        bootbox.alert(result.message);
                    }
                }
            });
        };

        self.deleteChapter = function(){
            obj = this;
            chapterID = obj.chapterID;
            chapterName = obj.chapterName();
            bootbox.confirm('确定要删除章【' + chapterName + '】吗？该章下所实验都将被删除', function(choice){
                if(choice){
                    data = {'chapterid':chapterID}
                    $.ajax({
                        url :  '/lab_deletechapter',
                        type : 'delete',
                        data : JSON.stringify(data),
                        dataType: 'json',
                        success : function(result){
                            if(result.code == 'success'){
                                bootbox.alert('删除成功！', function(){
                                    $("#dlgChapter").modal('hide');
                                    self.chapters.remove(obj);
                                })
                            } else{
                                bootbox.alert(result.message);
                            }
                        }
                   });
                }
            });
        };

        self.newLab = function(){
            lab = new Lab();
            lab.chapterID = this.chapterID;
            lab.chapter = this;
            self.selectedLab(lab);
            $("#dlgLab").modal({ 'backdrop': 'static' });
        }

        self.editLab = function(){
            self.selectedLab(this);
            $("#dlgLab").modal({ 'backdrop': 'static' });
        };

        self.confirmLab = function(){
            var obj = this;
            if (!obj.labName()){
                bootbox.alert('请填写实验名称字段！');
                return;
            }

            var lab = {
                labid : obj.labID,
                chapterid : obj.chapterID,
                labname : obj.labName(),
                labtype : obj.labType(),
                enabled : obj.enabled(),
            };
            url = obj.labID ? '/lab_editlab' : '/lab_newlab';
            type = obj.labID ? 'put' : 'post';
            $.ajax({
                url :  url,
                type : type,
                data : JSON.stringify(lab),
                dataType: 'json',
                success : function(result){
                    if(result.code == 'success'){
                        bootbox.alert('操作成功！', function(){
                            $("#dlgLab").modal('hide');
                            if(type == 'post'){
                                obj.labID = result.message.labid;
                                obj.code = result.message.code;
                                obj.chapter.labs.push(obj);
                            }
                        })
                    } else{
                        bootbox.alert(result.message);
                    }
                }
            });
        };

        self.deleteLab = function(){
            obj = this;
            labID = obj.labID;
            labName = obj.labName();
            bootbox.confirm('确定要删除实验【' + labName + '】吗？', function(choice){
                if(choice){
                    data = {'labid':labID}
                    $.ajax({
                        url :  '/lab_deletelab',
                        type : 'delete',
                        data : JSON.stringify(data),
                        dataType: 'json',
                        success : function(result){
                            if(result.code == 'success'){
                                bootbox.alert('删除成功！', function(){
                                    $("#dlgChapter").modal('hide');
                                    obj.chapter.labs.remove(obj);
                                })
                            } else{
                                bootbox.alert(result.message);
                            }
                        }
                   });
                }
            });
        };
    }

    function load_data(courseID){
        $.getJSON("/lab_getchapterlist?id=" + courseID, function(data){
            var chapters = [];
            for(var i=0;i<data.chapters.length;i++){
                var item1 = data.chapters[i];
                var chapter = new Chapter(item1.chapterid, item1.chaptername, item1.code);
                chapters.push(chapter);

                for(var j=0;j<data.labs.length;j++){
                    var item2 = data.labs[j];
                    if(item2.chapterid == item1.chapterid){
                        var lab = new Lab(item2.labid, item2.chapterid, item2.labname, 
                            item2.code, item2.labtype, item2.enabled, chapter);
                        chapter.labs.push(lab);
                    }
                }
            }           

            modelView.chapters(chapters);
        });
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);

    $(document).ready(function(){
        load_data(courseID);
    });
</script>
{% end block %}
